export const elements = {
  text: {
    name: "文本",
    options: {
      disabled: false,
    },
    data: {
      name: "text",
      x: 160,
      y: 80,
      w: 200,
      h: 200,
      angle: 0,
      type: "text",
      desc: {
        text: "Hello World",
        color: "#3f51b5",
        fontSize: 60,
        textAlign: "center",
        bgColor: "#3f51b51f",
        borderRadius: 10,
        borderWidth: 2,
        borderColor: "#3f51b5",
      },
    },
  },
  rect: {
    name: "矩形",
    options: {
      disabled: false,
    },
    data: {
      name: "rect",
      x: 160,
      y: 120,
      w: 200,
      h: 100,
      angle: 30,
      type: "rect",
      desc: {
        bgColor: "#d5f5f9",
        borderRadius: 10,
        borderWidth: 2,
        borderColor: "#3f51b5",
      },
    },
  },
  circle: {
    name: "圆形",
    options: {
      disabled: false,
    },
    data: {
      name: "circle",
      x: 160,
      y: 100,
      w: 200,
      h: 200,
      angle: 0,
      type: "circle",
      desc: {
        bgColor: "#d5f5f9",
        borderRadius: 10,
        borderWidth: 4,
        borderColor: "#3f51b5",
      },
    },
  },
  image: {
    name: "图片",
    options: {
      disabled: false,
    },
    data: {
      name: "image",
      x: 160,
      y: 100,
      w: 200,
      h: 200,
      angle: 0,
      type: "image",
      desc: {
        src: "./my.jpg",
      },
    },
  },
  svg: {
    name: "svg",
    options: {
      disabled: false,
    },
    data: {
      name: "svg",
      x: 160,
      y: 100,
      w: 200,
      h: 200,
      angle: 0,
      type: "svg",
      desc: {
        svg: `<svg  viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"  width="400" height="400"><path d="M512 1013.76c-277.11488 0-501.76-224.64512-501.76-501.76S234.88512 10.24 512 10.24s501.76 224.64512 501.76 501.76-224.64512 501.76-501.76 501.76z m0-51.02592c248.9344 0 450.73408-201.79968 450.73408-450.73408 0-248.9344-201.79968-450.73408-450.73408-450.73408-248.9344 0-450.73408 201.79968-450.73408 450.73408 0 248.9344 201.79968 450.73408 450.73408 450.73408zM456.9856 637.9008l295.45984-339.94752a26.4192 26.4192 0 0 1 37.59616-2.31936 28.32896 28.32896 0 0 1 3.10784 38.8608l-307.01568 380.38016a30.72 30.72 0 0 1-42.90048 4.84864L235.44832 556.2368a32.128 32.128 0 0 1-5.74976-44.6464 32.1536 32.1536 0 0 1 44.544-6.58944l182.74304 132.90496z" fill="#1890ff"></path></svg>`,
      },
    },
  },
  html: {
    name: "html",
    options: {
      disabled: false,
    },
    data: {
      name: "html",
      x: 200,
      y: 120,
      w: 150,
      h: 100,
      type: "html",
      angle: 0,
      desc: {
        html: `
            <style>
            .btn-box {
              margin: 10px 0;
            }
            .btn {
              line-height: 1.5715;
              position: relative;
              display: inline-block;
              font-weight: 400;
              white-space: nowrap;
              text-align: center;
              background-image: none;
              border: 1px solid transparent;
              box-shadow: 0 2px #00000004;
              cursor: pointer;
              user-select: none;
              height: 32px;
              padding: 4px 15px;
              font-size: 14px;
              border-radius: 2px;
              color: #000000d9;
              background: #fff;
              border-color: #d9d9d9;
            }
            .btn-primary {
              color: #fff;
              background: #1890ff;
              border-color: #1890ff;
              text-shadow: 0 -1px 0 rgb(0 0 0 / 12%);
              box-shadow: 0 2px #0000000b;
            }
            </style>
            <div>
              <div class="btn-box">
                <button class="btn">
                  <span>Button</span>
                </button>
              </div>
              <div class="btn-box">
                <button class="btn btn-primary">
                  <span>Button Primary</span>
                </button> 
              </div>
            </div>
          `,
      },
    },
  },
  html: {
    name: "会员",
    options: {
      disabled: true,
    },
    data: {
      name: "html",
      x: 200,
      y: 120,
      w: 150,
      h: 100,
      type: "html",
      angle: 0,
      desc: {
        html: `
            <style>
            .btn-box {
              margin: 10px 0;
            }
            .btn {
              line-height: 1.5715;
              position: relative;
              display: inline-block;
              font-weight: 400;
              white-space: nowrap;
              text-align: center;
              background-image: none;
              border: 1px solid transparent;
              box-shadow: 0 2px #00000004;
              cursor: pointer;
              user-select: none;
              height: 32px;
              padding: 4px 15px;
              font-size: 14px;
              border-radius: 2px;
              color: #000000d9;
              background: #fff;
              border-color: #d9d9d9;
            }
            .btn-primary {
              color: #fff;
              background: #1890ff;
              border-color: #1890ff;
              text-shadow: 0 -1px 0 rgb(0 0 0 / 12%);
              box-shadow: 0 2px #0000000b;
            }
            </style>
            <div>
              <div class="btn-box">
                <button class="btn">
                  <span>Button</span>
                </button>
              </div>
              <div class="btn-box">
                <button class="btn btn-primary">
                  <span>Button Primary</span>
                </button> 
              </div>
            </div>
          `,
      },
    },
  },
};
